<template>
  <view class="my h100p flc">
    <view class="top flr bgWH ph16 pv8">
      <view class="imgbox">
        <u--image class="img" src="/static/images/logo.png" width="60px" height="60px" alt="" />
      </view>
      <div class="flcv name">{{ username }}</div>
    </view>
    <view class="mt10 bgWH">
      <u-cell title="出库单" isLink url="/pages/home/components/exportOutOrderList">
        <u-icon slot="icon" size="24" name="list-dot" />
      </u-cell>
      <u-cell title="订单列表" isLink url="/pages/home/components/exportOrderList">
        <u-icon slot="icon" size="24" name="grid" />
      </u-cell>
      <u-cell title="信息维护" isLink url="/pages/home/components/infoList">
        <u-icon slot="icon" size="24" name="info-circle" />
      </u-cell>
      <u-cell title="设置宽度" isLink url="/pages/home/components/setCell">
        <u-icon slot="icon" size="24" name="coupon" />
      </u-cell>
      <!-- <u-cell title="清除数据" isLink @click="quitClick1">
        <u-icon slot="icon" size="24" name="trash" />
      </u-cell> -->
      <u-cell title="退出登录" isLink @click="quitClick">
        <u-icon slot="icon" size="24" name="share-square" />
      </u-cell>
    </view>
    <u-modal :show="show" @confirm="confirm" @cancel="cancel" show-cancel-button title="确定要清除数据吗?" ref="uModal" />
  </view>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      show: false
    };
  },
  onLoad() {
    this.username = uni.getStorageSync('username');
  },
  methods: {
    quitClick() {
      uni.removeStorageSync('username');
      uni.removeStorageSync('password');
      uni.navigateTo({ url: '/pages/login/index' });
    },
    quitClick1() {
      this.show = true;
    },
    confirm() {
      this.show = false;
      uni.removeStorageSync('outOrder');
      uni.removeStorageSync('order');
      let uid = setTimeout(() => {
        clearTimeout(uid);
        uni.showToast({ title: `清除成功`, icon: 'success', duration: 2000 });
      }, 1000);
    },
    cancel() {
      this.show = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.my {
  background: #f2f5f8;
  .top {
    height: 76px;
  }
  .name {
    padding-left: 16px;
  }
}
</style>
